<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { useRouter } from "vue-router";
import {getUserInfo, logout, updateUserInfo} from "@/api/user.ts";
import {showFailToast, showToast, Toast} from "vant";
import {removeCookie} from "@/utils";
import request from "@/api";



const router = useRouter();

const handleClick = (editkey: string, editvalue: string, editname: string) => {
  if(editkey === "tags"){
    router.push({
      path: '/tagSelect',
      query: {
        editkey,
        editvalue: editvalue,
        editname,
        id: userinfo.value.id
      },
    })
  }
  else {
    router.push({
      path: '/editpage',
      query: {
        editkey,
        editvalue,
        editname,
        id: userinfo.value.id
      },
    });
  }

};
const userinfo = ref()
const showphoto = ref(false)

onMounted( async ()=>{
     userinfo.value =(await getUserInfo()).data.data;
      if(userinfo.value.tags != ""){
     userinfo.value.tags = JSON.parse(userinfo.value.tags)
      }
     userinfo.value.createTime = new Date(userinfo.value.createTime).toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" });
     console.log("user",userinfo.value)
     if( !userinfo.value){
       Toast.fail("未登录")
     }

})

const cancelPhoto = () => {
  console.log("savePhoto");
  showphoto.value = false;
};

const savePhoto = () => {
  console.log("savePhoto");

  showphoto.value = false;
};

const exit = () => {
  logout().then((res)=>{
    if(res.data.data){
      showToast({
        message: "退出成功",
        icon: 'success',
      });
      removeCookie()
      router.push({
        path: '/login',
      });
    }
    else {
      showFailToast(res.data.msg);
    }
  }).catch(()=>{
    showFailToast("退出失败");
  })

};

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器

  updateUserInfo({
    id: userinfo.value.id,
    avatarUrl: file.content,
  }).then((res)=>{
    if(res.data.data){

      showToast({
        message: "修改成功",
        icon: 'success',
      });
    }
    else {
      showFailToast(res.data.description);
    }
  }).catch((error) => {
    console.log("error", error)
  })
  userinfo.value.avatarUrl = file.content;
  console.log(file.content)
  console.log(file);
};

</script>

<template>
  <div class="profile-container" v-if="userinfo">
    <!-- Profile Image -->
    <div class="profile-image-container" >
      <van-image
          round
          @click="showphoto = true "
          width="8rem"
          height="8rem"
          :src=userinfo.avatarUrl
      >
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>

    </div>
    <van-popup
        v-model:show="showphoto"
        position="bottom"
        :style="{ height: '30%' }"
    >
      <div style="display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; height: 100%;">
        <van-button type="large" @click="savePhoto" style="position: relative;">
          更换图像
          <van-uploader :after-read="afterRead" style="opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;" :preview-size="[400, 45]">
          </van-uploader>
        </van-button>
        <van-button type="large" @click="cancelPhoto">取消</van-button>
      </div>
    </van-popup>
    <!-- User Info -->
    <van-cell title="账号" :value="userinfo.userAccount" size="large"  class="info-cell"/>
    <van-cell title="我的标签" is-link :value="userinfo.tags" size="large" @click="handleClick('tags', userinfo.tags, '标签') " class="info-cell">
      <van-tag style=" margin-right: 3px; " v-for="tag in userinfo.tags" :key="tag" size="medium" plain type="warning" >{{ tag }}</van-tag>
    </van-cell>
    <van-cell title="自我介绍" is-link :value="userinfo.profile" size="large" @click="handleClick('profile', userinfo.profile, '自我介绍') " class="info-cell"/>
    <van-cell title="电话" is-link :value="userinfo.phone" size="large" @click="handleClick('phone', userinfo.phone, '电话') " class="info-cell"/>
    <van-cell title="我创建的队伍"  size="large" class="info-cell" @click="router.push({ path: '/mycreateTeam' ,query: { id: userinfo.id }})">
      <van-icon name="arrow" />
    </van-cell>
    <van-cell title="我加入的队伍"  size="large" class="info-cell" @click="router.push({ path: '/myJoinTeam' ,query: { id: userinfo.id }})">
      <van-icon name="arrow" />
    </van-cell>
    <van-cell title="性别" is-link :value="userinfo.gender ? '男' :'女'" size="large" @click="handleClick('gender', userinfo.gender ? '男' :'女', '性别')" class="info-cell"/>
    <van-cell title="昵称" is-link :value="userinfo.username" size="large" @click="handleClick('username', userinfo.username, '昵称')" class="info-cell"/>
    <van-cell title="邮箱" is-link :value="userinfo.email" size="large" @click="handleClick('email', userinfo.email, '邮箱')" class="info-cell"/>

    <van-cell title="注册时间" :value="userinfo.createTime" size="large" class="info-cell"/>

    <van-button plain type="success" block @click="exit()">退出登录</van-button>  </div>
  <van-empty image="search" v-else  description =" 未登录 " />

</template>

<style scoped>
.profile-container {
  padding: 20px;
  background-color: #f7f8fa;
}

.profile-image-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.info-cell {
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.van-cell__title {
  font-size: 16px;
  color: #333;
}

.van-cell__value {
  font-size: 14px;
  color: white;
}

.van-cell.is-link {
  border-bottom: 1px solid #e5e5e5;
}

.van-cell:last-child {
  border-bottom: none;
}
.hiddend{
  width: 100%;
  height: 100%;
}
</style>
